<template>
  <el-dialog
    :title="$t('买家数量')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="1000px"
    :before-close="cancel"
  >
    <div id="skuSalePlatformChart" style="width: 100%; height: 600px"></div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getStockSource } from '@/api/distribution/sku/shopSkuPair'
import * as echarts from 'echarts'
const handlePercent = (value, total) => {
  let percent = (+(value / total) * 100).toFixed(2)
  isNaN(percent) ? (percent = 0) : percent
  return `${percent}%`
}
export default {
  props: {
    /**
     * title
     */
    // title: {
    //   type: String,
    //   default: '卖家持有总库存',
    // },
    /**
     * legendWidth
     */
    legendWidth: {
      type: Number,
      default: 120,
    },
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: '',
      detail: {},
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    /** 初始化图表 */
    drawEcharts(data) {
      const _data = data.map((item) => {
        return {
          value: item.value,
          name: item.name,
          labelLine: { show: true },
          label: { show: true },
        }
      })
      var chartDom = document.getElementById('skuSalePlatformChart')
      this.myChart = echarts.init(chartDom)

      let tatalSale = 0
      data.map((i) => {
        tatalSale += +i.value || 0
      })
      var option = {
        // title: {
        //   text: `卖家持有总库存:\n\n${tatalSale}`,
        //   left: 'center',
        //   top: 'center',
        // },
        title: {
          text: [`{a|卖家总数量:}`, '{b|}' /** */, `{c|${tatalSale}}`].join('\n'),
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 30,
              },
              b: {
                // lineHeight: 10, // 控制空行高度
              },
              c: {
                fontSize: 20,
                fontWeight: 'bold',
                lineHeight: 30,
              },
            },
          },
          textAlign: 'center',
          textVerticalAlign: 'middle',
          left: '59.5%',
          top: '50%',
        },

        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.5)',
          padding: [10, 25],
          textStyle: {
            color: '#fff',
            fontSize: 13,
          },
          formatter: function (params) {
            const { name, value, color } = params
            return `
            <div style="font-weight:bold;">
              <span style="color:${color}"> ● </span>
              ${name} : ${value}
              </div>
            <div style="text-align:center;">${handlePercent(value, tatalSale)}</div>
              `
          },
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   textStyle: {
        //     fontSize: 13,
        //     fontWeight: 600,
        //   },
        //   formatter: function (name) {
        //     let legend = ''
        //     _data.map((i) => {
        //       if (i.name == name) {
        //         legend = `${name}:${i.value}`
        //       }
        //     })
        //     return legend
        //   },
        // },
        legend: {
          orient: 'vertical',
          left: 10,
          itemWidth: 0,
          itemHeight: 0,
          formatter: function (name) {
            var data = option.series[0].data
            var target = data.filter(function (item) {
              return item.name === name
            })[0]
            var value = target ? target.value : ''
            return '{a|' + name + '}  ' + value
          },
          textStyle: {
            rich: {
              a: {
                width: this.legendWidth,
                height: 20,
                align: 'center',
                color: '#fff',
                backgroundColor: 'inherit',
              },
            },
          },
        },

        series: [
          {
            type: 'pie',
            radius: ['40%', '85%'],
            center: ['60%', '50%'],

            itemStyle: {
              borderRadius: 5,
            },
            selectedMode: 'single',
            data: _data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              normal: {
                formatter: function (e) {
                  let data = e.data
                  if (data.value == 0) {
                    data.labelLine.show = false
                    data.label.show = false
                  } else {
                    return `${data.name}:${e.value}`
                  }
                },
              },
            },
          },
        ],
      }

      option && this.myChart.setOption(option)
    },
    getList() {
      getStockSource({ id: this.formData.skuDistributorId }).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          const { reserveStock, cloudStock, sellerTotalStock, sellerUnOutStock, stock } = data
          this.detail = { ...data }
          this.title = `供应商库存(${stock}) = 预留库存(${reserveStock}) + 云库存(${cloudStock}) + 卖家持有总库存(${sellerTotalStock}) + 卖家未出货总库存(${sellerUnOutStock})`
          this.$nextTick(() => {
            this.drawEcharts(res.data.statisticsSellerStock)
          })
        }
      })
    },
    handleSubmit() {},
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-descriptions-item__cell {
  width: 50%;
}

.d-title {
  width: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  div {
    &:nth-child(2) {
      font-weight: bold;
      font-size: 18px;
    }
  }
}
</style>
